<template>
    <n-flex vertical h-full :wrap="false">
        <n-flex w-full h-500px :wrap="false">
            <n-el flex-1>
                <app-cropper-panel @confirm="handleUpdateValue" />
            </n-el>
            <n-el flex-1>
                <app-cropper-panel @confirm="handleUpdateValue" />
            </n-el>
        </n-flex>

        <n-flex w-full>
            <n-card flex-1 title="裁剪窗体" :segmented="true" size="small">
                <n-flex w-full>
                    <n-space flex-1 vertical>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                    </n-space>
                    <n-image v-if="imageBase64" :src="imageBase64" :width="120" :height="120" />
                </n-flex>
            </n-card>
            <n-card flex-1 title="裁剪窗体" :segmented="true" size="small">
                <n-flex w-full>
                    <n-space flex-1 vertical>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                    </n-space>
                    <n-image v-if="imageBase64" :src="imageBase64" :width="120" :height="120" />
                </n-flex>
            </n-card>
            <n-card flex-1 title="裁剪窗体" :segmented="true" size="small">
                <n-flex w-full>
                    <n-space flex-1 vertical>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                    </n-space>
                    <n-image v-if="imageBase64" :src="imageBase64" :width="120" :height="120" />
                </n-flex>
            </n-card>
            <n-card flex-1 title="裁剪窗体" :segmented="true" size="small">
                <n-flex w-full>
                    <n-space flex-1 vertical>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                        <n-button flex-1 @click="show" block> 图片裁剪 </n-button>
                    </n-space>
                    <n-image v-if="imageBase64" :src="imageBase64" :width="120" :height="120" />
                </n-flex>
            </n-card>
        </n-flex>
        <n-card title="图片上传" size="small" :segmented="true">
            <n-flex w-full>
                <app-cropper-upload v-model:value="imageBase64" />
                <app-cropper-upload v-model:value="imageBase64" />
                <app-cropper-upload v-model:value="imageBase64" />
                <app-cropper-upload v-model:value="imageBase64" />
            </n-flex>
        </n-card>

        <app-cropper-modal v-model:show="visiable" :value="imageBase64" @update:value="handleUpdateValue" @update:closed="hide" />
    </n-flex>
</template>

<script lang="ts" setup>
import { AppCropperPanel, AppCropperModal, AppCropperUpload } from "@scpun/components";
import { useVisiable } from "@scpun/hooks";

const imageBase64 = ref("");
const { visiable, show, hide } = useVisiable();

function handleUpdateValue(value: string) {
    imageBase64.value = value;
    hide();
}
</script>
